<template>
	<view class="login-container">
    <!-- 填充区 -->
    <view class="statusBar" :style="{ height: getStatusBarHeight()+ 60 + 'px'}"></view>
		<view class="login-header">
			<text class="login-title">欢迎登录</text>
			<text class="login-subtitle">请输入您的账号和密码</text>
		</view>
		
		<view class="form-container">
			<view class="input-group">
				<text class="label">用户名</text>
				<input class="input" type="text" v-model="username" placeholder="请输入用户名" />
			</view>
			
			<view class="input-group">
				<text class="label">密码</text>
				<input class="input" type="password" v-model="password" placeholder="请输入密码" password />
			</view>
			
			<view class="forgot-password" @click="forgotPassword">
				<text>忘记密码？</text>
			</view>
			
			<button class="login-btn" @click="handleLogin">登录</button>
			
			<view class="register-link" @click="navigateToRegister">
				<text>还没有账号？</text>
				<text class="link">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { getStatusBarHeight } from '@/utils/system' 
import { postLoginAPI } from '@/services/login-register'
import { useUserStore } from '@/stores'

const username = ref('')
const password = ref('')
const useInfoStore = useUserStore()
const handleLogin = async () => {
	if (!username.value || !password.value) {
		uni.showToast({
			title: '请输入用户名和密码',
			icon: 'none'
		})
		return
	}
	console.log(username.value,password.value)
	uni.showLoading({
		title: '登录中...'
	})
	const res = await postLoginAPI({ username: username.value, password: password.value })
	console.log('login',res)
	if(res.msg && res.msg === '登录成功'){
		// 确保存储用户信息
		const userInfo = {
			...res.data.user,
			token: res.data.token ? res.data.token.replace('Bearer ','') : ''
		}
		useInfoStore.setUserInfo(userInfo)
		uni.hideLoading()
		uni.showToast({
			title: '登录成功',
			icon: 'success'
		})
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/home/home'
			})
		}, 1000)		
	}
}

const forgotPassword = () => {
	uni.showToast({
		title: '请联系管理员重置密码',
		icon: 'none'
	})
}

const navigateToRegister = () => {
	uni.navigateTo({
		url: '/pages/register/register'
	})
}
</script>

<style lang="scss">
.login-container {
	padding: 40rpx;
	height: 100vh;
	background-color: $uni-bg-color;
  width: 100%;
  .statusBar{
    width: 100%;
    background-color: $uni-bg-color;
  }
	.login-header {
		margin: 60rpx 0;
		text-align: center;
		
		.login-title {
			font-size: 48rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 20rpx;
			display: block;
		}
		
		.login-subtitle {
			font-size: 28rpx;
			color: #666666;
		}
	}
	
	.form-container {
		margin-top: 60rpx;
    width: 100%;
		
		.input-group {
			margin-bottom: 40rpx;
			
			.label {
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 16rpx;
				display: block;
			}
			
			.input {
				height: 90rpx;
				background-color: $uni-bg-color-grey;
				border-radius: 45rpx;
				padding: 0 40rpx;
				font-size: 28rpx;
			}
		}
		
		.forgot-password {
			text-align: right;
			margin-bottom: 60rpx;
			
			text {
				color: #007AFF;
				font-size: 26rpx;
			}
		}
		
		.login-btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #007AFF;
			color: $uni-bg-color;
			border-radius: 45rpx;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 40rpx;
		}
		
		.register-link {
			text-align: center;
			font-size: 26rpx;
			
			text {
				color: #666666;
				
				&.link {
					color: #007AFF;
					margin-left: 10rpx;
				}
			}
		}
	}
}
</style> 